import React, {Component} from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      type: 'loading',
      list: [{key: 'test'}]
    }
    fetch('/fileList').then(resp =>
      resp.json()
    ).then(data => {
      console.log(data.data);
      this.setState({
        type: '',
        list: data.data[0]
      })
    })
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <p>
            {this.state.type}
          </p>
          {
            this.state.list.map((file, key) => {
              return <div key={key} onClick={(e) => this.handClick(file)}>{file.key}</div>
            })
          }
        </header>
      </div>
    );
  }

  handClick(file) {
    console.log(file)

    var path = {
      pathname:'/detail',
      state:{ domain: 'http://pk83f9gxl.bkt.clouddn.com/',file:file },
    }
    this.props.history.push(path);
  }
}

export default App;
